<template>
  <view class="container">
    <view style="flex: 1">
      <view class="news-detail-title">
        {{ newsDetail.title || "暂无信息" }}
      </view>

      <view class="news-detail-subtitle mb-25">
        <text class="type mr-15">{{ newsDetail.createByName || "" }}</text>
        <text class="time">{{ newsDetail.createTime || "" }}</text>
      </view>
      <!-- <view class="news-detail-content">
				<view class="content-text mb-20">
					{{newsDetail.details  || ''}}
				</view>
			</view> -->
      <!-- 文章 -->
      <view class="u-content mb-20">
        <u-parse
          v-if="newsDetail.resourceType == 1"
          :html="newsDetail.details || ''"
          :tag-style="style"
        ></u-parse>
        <view v-if="newsDetail.resourceType == 2">
          <!-- <video :src="newsDetail.details"></video> -->
          <video class="video-h" objectFit="cover" style="width: 100%; height: 360rpx;" :poster="newsDetail.coverPath ? newsDetail.coverPath : ''" controls width="100%" :src="newsDetail.details"></video>
        </view>
      </view>
    </view>
    <!-- 评价 -->
    <newsComment :commentList="newsCommentList"></newsComment>
    <view class="commets-input2">
      <u-input
        v-model="commentsVal"
        :auto-height="true"
        maxlength="390"
        :clearable="false"
        class="text"
        type="textarea"
        placeholder="快来说说学习感受..."
      />
      <view class="subcomment2" @tap="subcomment">发布评论</view>
    </view>
  </view>
</template>

<script>
import mock from "@/mock/newsDetail.js"; //mock
import tpl_flex_one from "./template/tpl_flex_one.vue"; //单行图片模块
import tpl_flex_two from "./template/tpl_flex_two"; //两张横图模块
import tpl_flex_three from "./template/tpl_flex_three.vue"; //三列单行图片模块
import newsComment from "./comment/newsComment.vue"; //评论区
import { API } from "../../config/myApi.js";
export default {
  data() {
    return {
      // 文章
      style: {
        // 字符串的形式
        p: "margin-top:24rpx;margin-bottom:34rpx;text-indent: 2em;",
      },
      newsDetail: mock,
      newsCommentList: [],
      // 宫格普通样式
      commonStyle: {
        width: "auto",
        height: "auto",
        border: "1px solid #D5D5D5",
        borderRadius: "10rpx",
        padding: "0",
        marginBottom: "30rpx",
      },
      commentsVal: "",
    };
  },
  components: {
    flexOne: tpl_flex_one,
    flexTwo: tpl_flex_two,
    flexThree: tpl_flex_three,
    newsComment,
  },
  onLoad() {
    this.newsDetail = uni.getStorageSync("newsDetail");
    // console.log(this.newsDetail);
    this.getInformationComment();
  },
  methods: {
    subcomment() {
      let data = {
        informationId: uni.getStorageSync("newsDetail").id,
        details: this.commentsVal,
        commentType: 0,
      };
      console.log(data);
      API.informationComment2(data).then((res) => {
        console.log(res);
        if (res.success) {
          this.getInformationComment();
          this.commentsVal = "";
        }
      });
    },
    async getInformationComment() {
      let data = {
        informationId: uni.getStorageSync("newsDetail").id,
        page: 1,
        rows: 10,
      };
      let res = await API.informationComment(data);
      if (res.code === 200) {
        this.newsCommentList = res.result.rows;
        console.log("res", res.result);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.news-detail-title {
  padding: 40rpx 0;
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  text-align: center;
}

.news-detail-subtitle {
  font-size: 24rpx;
  color: #333333;
  line-height: 20px;

  .type {
    font-weight: 500;
  }

  .time {
    color: #999999;
  }
}

.news-detail-content {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 50rpx;

  .content-text {
    text-indent: 2em;
  }
}
// 文章
.u-content {
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  margin-top: 18rpx;
  overflow: hidden;
}
.container {
  display: flex;
  flex-direction: column;
}
.commets-input2 {
  position: fixed;
  bottom: 10rpx;
  width: 100%;
  height: 200rpx;
  //   .text {
  //     padding: 10rpx;
  //     //   width: 100%;
  //     border: 1px solid #ccc;
  //   }
  .subcomment2 {
    background-color: #ff5663;
    position: absolute;
    padding: 20rpx;
    color: #fff;
    right: 50rpx;
    border-radius: 4rpx;
    margin-top: 10rpx;
  }
}
</style>
